<!DOCTYPE html>
<html lang="en">
<head>
    <!--
    @Author 硕鼠
    @Date 2020/4/11 13:04
    @Version 1.0
    @Description layer使用
  -->
    <meta charset="UTF-8">
    <title>layer使用</title>
    <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>

<button class="layui-btn" id="btn1">弹出的信息框</button>
<button class="layui-btn" id="btn2">询问框</button>
<button class="layui-btn" id="btn3">提示框</button>
<button class="layui-btn" id="btn4">演示事件调用</button>

<script src="layui/layui.js"></script>
<script>
    layui.use(['form','layer','jquery'], function(){
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.jquery;

        // layer.msg('hello'); //测试显示
        // layer.open({
        //     type:1, //0默认样式
        //     content:'这是内容',
        //     title:'提示信息' //标题
        // });
        /**
         * 方法
         */
        //弹出的信息框(有图标)
        $("#btn1").click(function () {
            //layer.alert(content, options, yes) - 普通信息框
            layer.alert("显示内容", {icon: 1},function (index) {
                console.log("点击了确定");

                //关闭弹出层
                layer.close(index);
            });
        });

        //询问框
        $("#btn2").click(function () {//用于网页开发中的二次确认
            layer.confirm("确定要删除吗", {icon: 6},function (index) {
                console.log("点击了确定");

                //关闭弹出层
                layer.close(index);
            });
        });

        //提示框
        $("#btn3").click(function () {//用于网页开发中的二次确认
            layer.msg("确定要删除吗？", {icon: 6},function (index) {
                console.log("消失了");
            });
        });

        /**
         * 事件
         */
        $("#btn4").click(function () {
            layer.open({
                type:0, //0默认样式
                content:'内容',
                btn:['按钮一', '按钮二', '按钮三'],
                title:'提示信息' ,//标题
                success:function (layero,index) { //层弹出后的成功回调方法
                    console.log("success");
                },
                yes:function (layero,index) {//确定按钮回调方法
                    console.log("yes点击");
                },
                cancel:function (index, layero) { //右上角关闭按钮触发的回调
                    if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时，该层才会关闭
                        layer.close(index);
                        console.log("cancel方法");
                    }
                    return false;
                },
                end:function () { //层销毁后触发的回调
                    console.log("end弹层销毁方法")
                },
                btn2: function(index, layero){ //多按钮回调函数书写
                    //按钮【按钮二】的回调
                    console.log("按钮2");
                    return false;//阻止点击该按钮关闭
                },
                btn3: function(index, layero){
                    //按钮【按钮三】的回调
                    console.log("按钮3");
                }
            });
        });



    });
</script>
</body>
</html>